<template>
  <el-timeline v-loading="loading">
    <el-timeline-item type="primary" v-for="(item, index) in list" :key="index">
      <div>{{ item.nodeComments }}</div>
      <div class="content">
        <span>{{ userType[item.userType].label }}</span>
        <span>{{ item.userName }}</span>
        <span> {{ filters.dateYMDHMSFormat(item.timeCreate) }}</span>
        <div class="content-status await" v-if="item.nodeStatus === 0">
          发起审批
        </div>
        <div class="content-status pass" v-else-if="item.nodeStatus === 1">
          已通过
        </div>
        <div class="content-status refuse" v-else-if="item.nodeStatus === 2">
          已驳回
        </div>
        <div class="cause-rejection" v-show="item.nodeStatus === 2">
          驳回原因: {{ item.nodeComments }}
        </div>
      </div>
    </el-timeline-item>
  </el-timeline>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { userType } from "@/utils/status.js";
const { proxy } = getCurrentInstance();
const list = ref([]);
const loading = ref(false);
const props = defineProps({
  business: {
    type: [String, Number],
    default: "",
  },
  id: {
    type: [String, Number],
    default: "",
  },
});
onMounted(() => {
  loading.value = true;
  proxy
    .$get({
      url: "/flows/list",
      params: {
        business: props.business,
        id: props.id
      },
    })
    .then(
      (res) => {
        // ''-审批中 0-驳回，1-通过，2-撤回,3-取消
        list.value = res;
        loading.value = false;
      },
      () => {
        loading.value = false;
      }
    );
});
</script>
<style lang="less" scoped>
.content {
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.02);
  padding: 16px;
  font-size: 14px;
  .cause-rejection {
    margin-top: 6px;
    color: rgba(0, 0, 0, 0.85) !important;
  }
  :first-child {
    color: rgba(0, 0, 0, 0.85);
    margin-right: 8px;
  }
  :nth-child(n + 2) {
    color: rgba(0, 0, 0, 0.45);
    margin-right: 8px;
  }
  .content-status {
    margin-top: 6px;
  }
  .content-status.await {
    color: #52c41a;
  }
  .content-status.pass {
    color: #3a85f5;
  }
  .content-status.refuse {
    color: red;
  }
}
</style>